<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item prop="taskNo">
          <el-input v-model="queryParams.taskNo" placeholder="处置编号" clearable size="small"
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="proNo">
          <el-input v-model="queryParams.proNo" placeholder="物品编号" clearable size="small"
                    @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="disposalType">
          <el-select v-model="queryParams.disposalType" placeholder="处置方式" clearable size="small">
            <el-option
              v-for="dict in dict.type.deal_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="disposalType">
          <el-select v-model="queryParams.inCenter" placeholder="在管理中心" clearable size="small">
            <el-option
              label="是"
              value="1"
            />
            <el-option
              label="否"
              value="0"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; gap: 8px;align-items: center;">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['wms:deal:export']"
            >导出
            </el-button>
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleRegister">处置登记</el-button>
            <el-upload
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleFileChange"
              accept=".xlsx,.xls"
            >
              <el-button type="primary" size="mini" icon="upload">导入数据</el-button>
            </el-upload>
          </div>

        </el-form-item>
      </el-form>

      <el-row>
        <el-col :span="18">
          <template v-for="item in overviewOptions">
            <el-badge
              class="item ml10"
              :value="item.totals"
              :is-dot="!item.totals"
              :type="item.totals?'danger':'info'"
            >
              <el-button @click="regionChange(item)" size="mini"
                         :type="item.region == queryParams.region ? 'primary':''"
              >{{ item.regionName }}
              </el-button>
            </el-badge>
          </template>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { getDisposalNotRegisterOverview } from '@/api/oms/dealTask'
import {uploadRegister} from "@/api/wms/deal";

export default {
  dicts: ['deal_type'],
  props: {
    queryParams: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showSearch: true,
      overviewOptions: []
    }
  },
  created() {
    this.getOverview()
  },
  methods: {
    handleFileChange(file) {
      const formData = new FormData()
      formData.append('file', file.raw)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$modal.loading('上传中....')
      uploadRegister(formData,config).then(() => {
        this.$modal.msgSuccess('上传成功')
        this.refresh()
      }).finally(() => {
        this.$modal.closeLoading()
      })
      // try {
      //   const data = this.readExcel(file.raw);
      //   const workbook = XLSX.read(data, { type: 'array' });
      //   const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      //   const tableData = XLSX.utils.sheet_to_json(firstSheet);
      //
      //   // 发送到后端
      //   const formData = new FormData();
      //   formData.append('file', file.raw);
      //   const res = axios.post('/sacw/disposal/register/upload', formData,{
      //     headers: {
      //       'Content-Type': 'multipart/form-data'
      //     }
      //   });
      //   console.log('导入结果:', res.data);
      // } catch (error) {
      //   console.error('导入失败:', error);
      // }
    },
    readExcel(file) {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.readAsArrayBuffer(file);
      });
    },
    getList() {
      this.$emit('getList')
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getOverview() {
      getDisposalNotRegisterOverview(this.queryParams).then(response => {
        this.overviewOptions = response.data
      })
    },
    regionChange(item) {
      this.queryParams.region = item.region
      this.getList()
    },
    handleExport() {
      this.download('/oms/task/disposal/exportNotRegisterList', {
        ...this.queryParams
      }, `disposal_${new Date().getTime()}.xlsx`)
    },
    handleRegister() {
      this.$emit('handleRegister')
    },
  }
}
</script>

<style scoped>
</style>
